import React, { useEffect, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { View, Image, Text } from "@tarojs/components";

import api from "@api/api.js";
import "./index.less";
export default () => {
  const [list, setList] = useState([]);
  useDidShow(() => {
    getCaseList();
  });
  // 获取我的案例列表
  const getCaseList = async () => {
    const { data } = await api.getCases();
    setList(data);
  };
  // 跳转编辑案例
  const editCase = (id) => {
    Taro.navigateTo({ url: `/pages/editCase/index?id=${id}` });
  };
  // 跳转新建案例
  const addCase = () => {
    Taro.navigateTo({ url: `/pages/select-department/index` });
  };
  return (
    <View className="bgBox">
      {list.map((item) => {
        return (
          <View className="listBox">
            <View className="listItem at-row borderBottom">
              <View className="fontBold at-col at-col-1 at-col--auto">
                分类
              </View>
              <View className=" at-col">
                <View className="font">{item.clinic}</View>
                <View className="font">{item.operation}</View>
                <View className="font">
                  {item.materials &&
                    item.materials.map((items) => {
                      return items.name;
                    })}
                </View>
              </View>
            </View>
            <View className="listItem at-row borderBottom">
              <View className="fontBold at-col at-col-1 at-col--auto">
                术前
              </View>
              <View className="listImg at-col">
                {item.beforeImg.map((item) => (
                  <Image src={api.bseUrl + item.path} />
                ))}
              </View>
            </View>
            <View className="listItem at-row borderBottom">
              <View className="fontBold at-col at-col-1 at-col--auto">
                术后
              </View>
              <View className="listImg at-col">
                {item.afterImg.map((item) => (
                  <Image src={api.bseUrl + item.path} />
                ))}
              </View>
            </View>
            {item.remark && (
              <View className="listRemarks borderBottom">
                <Text className="font">{item.remark}</Text>
              </View>
            )}
            <View className="listBtn at-row at-row__align--center">
              <View className="listStatus at-col at-col-1 at-col--auto">
                {item.caseType}
              </View>
              <View className="listTime at-col at-col-1 at-col--auto">
                {item.openTime}
              </View>
              <View className="listEdit at-col">
                <View
                  onClick={() => {
                    editCase(item.id);
                  }}
                >
                  编辑案例
                </View>
              </View>
            </View>
          </View>
        );
      })}
      <View className="bottomBtn" onClick={addCase}>
        <View>新建案例</View>
      </View>
    </View>
  );
};
